<script setup lang="ts">
import {ref} from "vue";
import { useRouter } from 'vue-router';
import FixedNav from "@/components/fixedNav/fixedNav.vue";
import Bottom from "@/components/bottom/bottom.vue";

const activeNav = ref('3') // 默认选中首页
const activeSubNav = ref('3-4')

// 定义路由的跳转
const router = useRouter();
const navigateTo = (path: string) => {
  router.push(path);
};
</script>

<template>
  <div class="ownershipMaiContain">
    <!--   顶部导航栏start -->
    <fixed-nav v-model:active-nav="activeNav"
               v-model:active-sub-nav="activeSubNav"></fixed-nav>
    <!--  顶部导航栏end  -->

    <div class="ownershipSection ownershipSection1">
      <img src="@/assets/images/ownershipSection1.png" class="ownershipTitle" alt="ownershipTitle">
      <span class="ownershipPoint ownershipPoint1"></span>
      <span class="ownershipContent ownershipContent1">商标注册</span>
      <span class="ownershipPoint ownershipPoint2"></span>
      <span class="ownershipContent ownershipContent2">版权登记</span>
      <span class="ownershipPoint ownershipPoint3"></span>
      <span class="ownershipContent ownershipContent3">专利申请</span>
      <span class="ownershipPoint ownershipPoint4"></span>
      <span class="ownershipContent ownershipContent4">异议、无效、答辩、疑难非诉类业务等</span>
    </div>
    <div class="ownershipSection ownershipSection2">
      <span class="advantageTitle">确权布局的核心价值在于为企业构建长期竞争优势</span>
      <img src="@/assets/images/advantage1.png" class="advantage1" alt="advantage1">
      <span class="advantageSubTitle advantageSubTitle1">一、保护创新成果和防止技术流失</span>
      <span
          class="advantageSubContent advantageSubContent1">通过商标注册、版权登记、专利申请等确权手段，企业可将核心技术转化为受法律保护的资产。</span>
      <img src="@/assets/images/advantage2.png" class="advantage2" alt="advantage2">
      <span class="advantageSubTitle advantageSubTitle2">二、法律合规与商业保障</span>
      <span
          class="advantageSubContent advantageSubContent2">通过多维度的知识产权系统性布局，企业可将知识产权风险防控从被动应对转变为主动管理以及构建商业护城河。</span>
      <img src="@/assets/images/advantage3.png" class="advantage3" alt="advantage3">
      <span class="advantageSubTitle advantageSubTitle3">三、提升市场竞争力与品牌价值</span>
      <span class="advantageSubContent advantageSubContent3">
        强化品牌识别度：商标确权能帮助消费者快速识别产品，建立品牌忠诚度；
        增强议价能力：拥有核心专利的企业在合作谈判中占据主动，甚至可通过商标、版权、专利授权实现收益；
        提高企业估值：知识产权作为资产可提升企业融资能力，例如小米通过收购专利包弥补短板，支撑国际化战略。</span>
      <img src="@/assets/images/advantage4.png" class="advantage4" alt="advantage4">
      <span class="advantageSubTitle advantageSubTitle4">四、推动技术转化与商业收益 </span>
      <span class="advantageSubContent advantageSubContent4">
        多元收益模式：通过专利许可、商标和版权授权、作价入股等方式，将创新成果转化为经济收益；
        促进研发循环：确权保护可激励企业持续投入研发，形成“创新-保护-收益-再创新”的良性循环。</span>
    </div>
    <div class="ownershipSection ownershipSection3">
      <span class="serviceStepChinese">服务流程</span>
      <span class="process trademarkRegistrationProcess">商标注册流程</span>
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep1.png" class="trademarkRegistrationProcessImg1" alt="trademarkRegistrationProcessImg1">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep2.png" class="trademarkRegistrationProcessImg2" alt="trademarkRegistrationProcessImg2">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep3.png" class="trademarkRegistrationProcessImg3" alt="trademarkRegistrationProcessImg3">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep4.png" class="trademarkRegistrationProcessImg4" alt="trademarkRegistrationProcessImg4">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep5.png" class="trademarkRegistrationProcessImg5" alt="trademarkRegistrationProcessImg5">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep6.png" class="trademarkRegistrationProcessImg6" alt="trademarkRegistrationProcessImg6">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep9.png" class="trademarkRegistrationProcessImg7" alt="trademarkRegistrationProcessImg7">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep9.png" class="trademarkRegistrationProcessImg8" alt="trademarkRegistrationProcessImg8">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep9.png" class="trademarkRegistrationProcessImg9" alt="trademarkRegistrationProcessImg9">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep9.png" class="trademarkRegistrationProcessImg10" alt="trademarkRegistrationProcessImg10">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep9.png" class="trademarkRegistrationProcessImg11" alt="trademarkRegistrationProcessImg11">
      <span class="processNum trademarkRegistrationProcessNum1" >01</span>
      <span class="processNum trademarkRegistrationProcessNum2" >02</span>
      <span class="processNum trademarkRegistrationProcessNum3" >03</span>
      <span class="processNum trademarkRegistrationProcessNum4" >04</span>
      <span class="processNum trademarkRegistrationProcessNum5" >05</span>
      <span class="processNum trademarkRegistrationProcessNum6" >06</span>
      <span class="processText trademarkRegistrationProcessText1">材料准备</span>
      <span class="processText trademarkRegistrationProcessText2">商标名称检索</span>
      <span class="processText trademarkRegistrationProcessText3">提交申请</span>
      <span class="processText trademarkRegistrationProcessText4">商标形式审查</span>
      <span class="processText trademarkRegistrationProcessText5">商标实质审查</span>
      <span class="processText trademarkRegistrationProcessText6">下发商标注册证书</span>
      <span class="process copyrightRegistrationProcess">版权登记流程</span>
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep1.png" class="copyrightRegistrationProcessImg1" alt="copyrightRegistrationProcessImg1">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep7.png" class="copyrightRegistrationProcessImg2" alt="copyrightRegistrationProcessImg2">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep3.png" class="copyrightRegistrationProcessImg3" alt="copyrightRegistrationProcessImg3">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep6.png" class="copyrightRegistrationProcessImg4" alt="copyrightRegistrationProcessImg4">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep9.png" class="copyrightRegistrationProcessImg5" alt="copyrightRegistrationProcessImg5">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep9.png" class="copyrightRegistrationProcessImg6" alt="copyrightRegistrationProcessImg6">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep9.png" class="copyrightRegistrationProcessImg7" alt="copyrightRegistrationProcessImg7">
      <span class="processNum copyrightRegistrationProcessNum1" >01</span>
      <span class="processNum copyrightRegistrationProcessNum2" >02</span>
      <span class="processNum copyrightRegistrationProcessNum3" >03</span>
      <span class="processNum copyrightRegistrationProcessNum4" >04</span>
      <span class="processText copyrightRegistrationProcessText1">材料准备</span>
      <span class="processText copyrightRegistrationProcessText2">确定类型</span>
      <span class="processText copyrightRegistrationProcessText3">提交申请</span>
      <span class="processText copyrightRegistrationProcessText4">下发版权登记证书</span>
      <span class="process patentApplicationProcess">专利申请流程</span>
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep1.png" class="patentApplicationProcessImg1" alt="patentApplicationProcessImg1">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep7.png" class="patentApplicationProcessImg2" alt="patentApplicationProcessImg2">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep3.png" class="patentApplicationProcessImg3" alt="patentApplicationProcessImg3">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep8.png" class="patentApplicationProcessImg4" alt="patentApplicationProcessImg4">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep5.png" class="patentApplicationProcessImg5" alt="patentApplicationProcessImg5">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep6.png" class="patentApplicationProcessImg6" alt="patentApplicationProcessImg6">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep9.png" class="patentApplicationProcessImg7" alt="patentApplicationProcessImg7">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep9.png" class="patentApplicationProcessImg8" alt="patentApplicationProcessImg8">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep9.png" class="patentApplicationProcessImg9" alt="patentApplicationProcessImg9">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep9.png" class="patentApplicationProcessImg10" alt="patentApplicationProcessImg10">
      <img src="@/assets/ownershipServiceStep/ownershipServiceStep9.png" class="patentApplicationProcessImg11" alt="patentApplicationProcessImg11">
      <span class="processNum patentApplicationProcessNum1" >01</span>
      <span class="processNum patentApplicationProcessNum2" >02</span>
      <span class="processNum patentApplicationProcessNum3" >03</span>
      <span class="processNum patentApplicationProcessNum4" >04</span>
      <span class="processNum patentApplicationProcessNum5" >05</span>
      <span class="processNum patentApplicationProcessNum6" >06</span>
      <span class="processText patentApplicationProcessText1">材料准备</span>
      <span class="processText patentApplicationProcessText2">专利写文</span>
      <span class="processText patentApplicationProcessText3">提交申请</span>
      <span class="processText patentApplicationProcessText4">受理书发货</span>
      <span class="processText patentApplicationProcessText5">流程跟进</span>
      <span class="processText patentApplicationProcessText6">下发专利证书</span>
    </div>

    <Bottom/>
  </div>
</template>

<style scoped>
.ownershipMaiContain {
  width: 1920px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  left: -8px; /* 新增向左微调 */
  top: -8px;
  box-sizing: border-box; /* 新增盒模型计算方式 */
}


.ownershipSection1 {
  width: 100%;
  height: 720px;
  background-image: url('@/assets/bk/ownershipSection1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ownershipTitle {

  position: absolute;
  top: 282px;
  left: 400px;
}

.ownershipPoint {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #FF6600;
  /* border: #FF6600 solid 1px; */
}

.ownershipPoint1 {
  position: absolute;
  top: 376px;
  left: 400px;
}

.ownershipPoint2 {
  position: absolute;
  top: 376px;
  left: 535px;
}

.ownershipPoint3 {
  position: absolute;
  top: 376px;
  left: 670px;
}

.ownershipPoint4 {
  position: absolute;
  top: 428px;
  left: 400px;
}

.ownershipContent {
  font-size: 20px;
  line-height: 28px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #FFFFFF;
}

.ownershipContent1 {
  position: absolute;
  top: 368px;
  left: 424px;
}

.ownershipContent2 {
  position: absolute;
  top: 368px;
  left: 559px;
}

.ownershipContent3 {
  position: absolute;
  top: 368px;
  left: 694px;
}

.ownershipContent4 {
  position: absolute;
  top: 420px;
  left: 424px;
}


.ownershipSection2 {
  position: relative;
  width: 100%;
  height: 819px;
  background: #101010;
  background-position: center;
  /* border: #FF6600 solid 1px; */

}

.advantageTitle {
  font-size: 40px;
  line-height: 56px;
  font-family: "Microsoft YaHei", sans-serif;
  font-weight: bold;
  letter-spacing: 1px;
  color: #FFFFFF;
  position: absolute;
  top: 80px;
  left: 527px;
}

.advantage1 {
  position: absolute;
  top: 179px;
  left: 400px;
}

.advantage2 {
  position: absolute;
  top: 299px;
  left: 400px;
}

.advantage3 {
  position: absolute;
  top: 457px;
  left: 400px;
}

.advantage4 {
  position: absolute;
  top: 623px;
  left: 400px;
}

.advantageSubTitle {
  font-family: "Microsoft YaHei", sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 40px;
  color: #FFFFFF;
  letter-spacing: 1px;
}

.advantageSubTitle1 {
  position: absolute;
  top: 187px;
  left: 486px;
}

.advantageSubTitle2 {
  position: absolute;
  top: 307px;
  left: 486px;
}

.advantageSubTitle3 {
  position: absolute;
  top: 455px;
  left: 486px;
}

.advantageSubTitle4 {
  position: absolute;
  top: 631px;
  left: 486px;
}

.advantageSubContent {
  width: 978px;
  font-size: 20px;
  line-height: 28px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #FFFFFF;
  opacity: 0.8;
}

.advantageSubContent1 {
  position: absolute;
  top: 239px;
  left: 542px;
}

.advantageSubContent2 {
  position: absolute;
  top: 359px;
  left: 542px;
}

.advantageSubContent3 {
  position: absolute;
  top: 507px;
  left: 542px;
}

.advantageSubContent4 {
  position: absolute;
  top: 683px;
  left: 542px;
}


.ownershipSection3 {
  position: relative;
  width: 100%;
  height: 1263px;
  background-image: url('@/assets/bk/ownershipSection3.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.serviceStepChinese {
  font-family: "Microsoft YaHei", sans-serif;
  letter-spacing: 2px;
  font-size: 40px;
  line-height: 56px;
  color: #FFFFFF;
  font-weight: 600;
  position: absolute;
  top: 80px;
  left: 881px;
}
.process{
  font-family: "Microsoft YaHei", sans-serif;
  letter-spacing: 2px;
  font-size: 32px;
  line-height: 45px;
  color: #FFFFFF;
  font-weight: 600;

}
.trademarkRegistrationProcess{
  position: absolute;
  top: 176px;
  left: 866px;
}
.copyrightRegistrationProcess{
  position: absolute;
  top: 525px;
  left: 866px;
}
.patentApplicationProcess{
  position: absolute;
  top: 874px;
  left: 866px;
}
.processNum {
  font-family: "Microsoft YaHei", sans-serif;
  font-weight: bold;
  font-size: 34px;
  line-height: 48px;
  color: #FFFFFF;
  letter-spacing: 1px;
}
.processText {
  font-family: "Microsoft YaHei", sans-serif;
  /* font-weight: bold; */
  font-size: 20px;
  line-height: 28px;
  color: #FFFFFF;
  letter-spacing: 1px;
}
/* 商标注册流程 */
.trademarkRegistrationProcessImg1 {
  position: absolute;
  top: 261px;
  left: 400px;
}

.trademarkRegistrationProcessImg2 {
  position: absolute;
  top: 261px;
  left: 604px;
}

.trademarkRegistrationProcessImg3 {
  position: absolute;
  top: 261px;
  left: 808px;
}

.trademarkRegistrationProcessImg4 {
  position: absolute;
  top: 261px;
  left: 1012px;
}

.trademarkRegistrationProcessImg5 {
  position: absolute;
  top: 261px;
  left: 1216px;
}

.trademarkRegistrationProcessImg6 {
  position: absolute;
  top: 261px;
  left: 1420px;
}

.trademarkRegistrationProcessImg7 {
  position: absolute;
  top: 277px;
  left: 524px;
}

.trademarkRegistrationProcessImg8 {
  position: absolute;
  top: 277px;
  left: 728px;
}

.trademarkRegistrationProcessImg9 {
  position: absolute;
  top: 277px;
  left: 932px;
}

.trademarkRegistrationProcessImg10 {
  position: absolute;
  top: 277px;
  left: 1136px;
}

.trademarkRegistrationProcessImg11 {
  position: absolute;
  top: 277px;
  left: 1340px;
}
.trademarkRegistrationProcessNum1{
  position: absolute;
  top: 365px;
  left: 427px;
}
.trademarkRegistrationProcessNum2{
  position: absolute;
  top: 365px;
  left: 631px;
}
.trademarkRegistrationProcessNum3{
  position: absolute;
  top: 365px;
  left: 835px;
}
.trademarkRegistrationProcessNum4{
  position: absolute;
  top: 365px;
  left: 1039px;
}
.trademarkRegistrationProcessNum5{
  position: absolute;
  top: 365px;
  left: 1243px;
}
.trademarkRegistrationProcessNum6{
  position: absolute;
  top: 365px;
  left: 1447px;
}
.trademarkRegistrationProcessText1{
  position: absolute;
  top: 417px;
  left: 410px;
}
.trademarkRegistrationProcessText2{
  position: absolute;
  top: 417px;
  left: 594px;
}
.trademarkRegistrationProcessText3{
  position: absolute;
  top: 417px;
  left: 818px;
}
.trademarkRegistrationProcessText4{
  position: absolute;
  top: 417px;
  left: 1002px;
}
.trademarkRegistrationProcessText5{
  position: absolute;
  top: 417px;
  left: 1206px;
}
.trademarkRegistrationProcessText6{
  position: absolute;
  top: 417px;
  left: 1391px;
}


/* 版权登记流程 */
.copyrightRegistrationProcessImg1{
  position: absolute;
  top: 610px;
  left: 460px;
}
.copyrightRegistrationProcessImg2{
  position: absolute;
  top: 610px;
  left: 760px;
}

.copyrightRegistrationProcessImg3{
  position: absolute;
  top: 610px;
  left: 1060px;
}

.copyrightRegistrationProcessImg4{
  position: absolute;
  top: 610px;
  left: 1360px;
}

.copyrightRegistrationProcessImg5{
  position: absolute;
  top: 626px;
  left: 632px;
}

.copyrightRegistrationProcessImg6{
  position: absolute;
  top: 626px;
  left: 932px;
}

.copyrightRegistrationProcessImg7{
  position: absolute;
  top: 626px;
  left: 1232px;
}
.copyrightRegistrationProcessNum1 {
  position: absolute;
  top: 714px;
  left: 487px;
}
.copyrightRegistrationProcessNum2 {
  position: absolute;
  top: 714px;
  left: 787px;
}
.copyrightRegistrationProcessNum3 {
  position: absolute;
  top: 714px;
  left: 1087px;
}
.copyrightRegistrationProcessNum4 {
  position: absolute;
  top: 714px;
  left: 1387px;
}
.copyrightRegistrationProcessText1 {
  position: absolute;
  top: 766px;
  left: 470px;
}
.copyrightRegistrationProcessText2 {
  position: absolute;
  top: 766px;
  left: 770px;
}
.copyrightRegistrationProcessText3 {
  position: absolute;
  top: 766px;
  left: 1070px;
}
.copyrightRegistrationProcessText4 {
  position: absolute;
  top: 766px;
  left: 1331px;
}

/* 专利申请流程 */
.patentApplicationProcessImg1{
  position: absolute;
  top: 959px;
  left: 395px;
}
.patentApplicationProcessImg2{
  position: absolute;
  top: 959px;
  left: 599px;
}
.patentApplicationProcessImg3{
  position: absolute;
  top: 959px;
  left: 803px;
}
.patentApplicationProcessImg4{
  position: absolute;
  top: 959px;
  left: 1007px;
}
.patentApplicationProcessImg5{
  position: absolute;
  top: 959px;
  left: 1211px;
}
.patentApplicationProcessImg6{
  position: absolute;
  top: 959px;
  left: 1415px;
}
.patentApplicationProcessImg7{
  position: absolute;
  top: 975px;
  left: 519px;
}
.patentApplicationProcessImg8{
  position: absolute;
  top: 975px;
  left: 723px;
}
.patentApplicationProcessImg9{
  position: absolute;
  top: 975px;
  left: 927px;
}
.patentApplicationProcessImg10{
  position: absolute;
  top: 975px;
  left: 1131px;
}
.patentApplicationProcessImg11{
  position: absolute;
  top: 975px;
  left: 1335px;
}
.patentApplicationProcessNum1 {
  position: absolute;
  top: 1063px;
  left: 422px;
}
.patentApplicationProcessNum2 {
  position: absolute;
  top: 1063px;
  left: 626px;
}
.patentApplicationProcessNum3 {
  position: absolute;
  top: 1063px;
  left: 830px;
}
.patentApplicationProcessNum4 {
  position: absolute;
  top: 1063px;
  left: 1034px;
}
.patentApplicationProcessNum5 {
  position: absolute;
  top: 1063px;
  left: 1238px;
}
.patentApplicationProcessNum6 {
  position: absolute;
  top: 1063px;
  left: 1442px;
}
.patentApplicationProcessText1 {
  position: absolute;
  top: 1115px;
  left: 405px;
}
.patentApplicationProcessText2 {
  position: absolute;
  top: 1115px;
  left: 609px;
}
.patentApplicationProcessText3 {
  position: absolute;
  top: 1115px;
  left: 813px;
}
.patentApplicationProcessText4 {
  position: absolute;
  top: 1115px;
  left: 1007px;
}
.patentApplicationProcessText5 {
  position: absolute;
  top: 1115px;
  left: 1221px;
}
.patentApplicationProcessText6 {
  position: absolute;
  top: 1115px;
  left: 1405px;
}


</style>